<template>
  <div>
    <!-- 
      $attrs      接受到非prop特性,class与style除外 {}
      $listeners  接受到绑定的事件 {}

     -->

    <label>
      {{ label }}:
      <!-- <input :type="type" :placeholder="placeholder" :readonly="readonly" /> -->

      <!-- <input
        :type="$attrs.type"
        :placeholder="$attrs.placeholder"
        :readonly="$attrs.readonly"
      /> -->

      <!-- <input
        :type="$attrs.type"
        :placeholder="$attrs.placeholder"
        :readonly="$attrs.readonly"
        @input="$emit('input', $event.target.value)"
      /> -->

      <input v-bind="$attrs" v-on="$listeners" />

      <p>{{ $attrs }}</p>
    </label>
  </div>
</template>

<script>
export default {
  name: "BaseInput",

  inheritAttrs: false,

  // props: ["label", "type", "placeholder", "readonly"],
  props: ["label", "value"],

  methods: {
    // fn1(event) {
    //   this.$emit("input", event.target.value);
    // },

    onInput() {
      console.log("onInput");
    },
  },

  created() {
    console.log(this);
  },
};
</script>
